<template>
  <div class="container">
    <div v-infinite-scroll="getLookHistoryList" :infinite-scroll-disabled="!moreHistory">
      <div class="view-box" v-for="history in historyList" :key="history.id">
        <div class="view-box-item">
          <div class="view-date">{{dateFormate1(history.updateTime)}}</div>
          <el-image :src="minioUrl+history.worksFImg" fit="cover" style="width:100%;height:100%"
            @click="preview(history.worksId)" />
        </div>
      </div>
    </div>
    <div v-show="deleteBtn" class="delete-history-btn" @click="deleteHistory">
      <el-button type="danger" circle>
        <el-icon :size="15">
          <delete />
        </el-icon>
      </el-button>
    </div>
  </div>
</template>

<script>
import { dateFormat } from '../../utils/index';
import { minioUrl } from '../../base/index';
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
  data () {
    return {
      activeName: ['1'],
      minioUrl,
      page: 1,
      pageSize: 50,
      historyList: [],
      moreHistory: true,
      deleteBtn: false,
    }
  },
  mounted () {
    this.getLookHistoryList();
  },
  methods: {
    handleChange (val) {
      console.log(val);
    },
    getLookHistoryList () {
      this.$axios.get("/lookhistory/" + (this.page++) + "/" + this.pageSize + "").then(res => {
        // this.loading = true;
        if (res.flag) {
          console.log("LookHistory-getLookHistoryList", res);
          if (res.data.length < 1) {
            // this.morePhotos = false
          } else {
            this.deleteBtn = true;
            for (var key in res.data) {
              this.historyList.push(res.data[key]);
            }
          }
        } else {
          // this.morePhotos = false
        }
        // this.loading = false;
      })
    },
    deleteHistory () {
      ElMessageBox.confirm(
        '确定要删除浏览记录吗?',
        '',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          this.$axios.delete('/lookhistory').then((res) => {
            if (res.flag) {
              ElMessage({
                message: res.msg,
                grouping: true,
                type: 'success',
                duration: 2000,
              });
              this.deleteBtn = false;
              this.historyList = [];
            }
          })
        })
        .catch(() => {

        });
    },
    //查看作品详情
    preview (id) {
      //跳转详情
      this.$router.push({ name: '作品详情', params: { worksId: id } });
    },
    //日期格式
    dateFormate1 (date) {
      return dateFormat(date, 4);
    }
  }
}
</script>

<style scoped>
.container {
}
.view-box {
  float: left;
}
@media (min-width: 0px) {
  .view-box {
    width: 50%;
    height: 100px;
  }
  .view-box-item {
    height: 100px;
  }
}
@media (min-width: 280px) {
  .view-box {
    width: 25%;
  }
  .view-box-item {
    height: 100px;
    padding-left: 2px;
    padding-right: 2px;
  }
}
@media (min-width: 750px) {
  .view-box {
    width: 20%;
  }
  .view-box-item {
    height: 150px;
  }
}
@media (min-width: 1080px) {
  .view-box {
    width: 10%;
  }
  .view-box-item {
    height: 100px;
  }
}
.view-box-item {
  position: relative;
}
.view-date {
  position: absolute;
  width: calc(100% - 4px);
  bottom: 0px;
  z-index: 1;
  text-align: center;
  height: 20%;
  color: gainsboro;
  background-color: rgba(1, 1, 1, 0.3);
  font-size: 13px;
}
.delete-history-btn {
  position: fixed;
  bottom: 70px;
  z-index: 10000;
  right: 10px;
  width: 40px;
  height: 40px;
}
</style>